<template>
  <el-drawer
   :title="dialogTitle"
   :visible.sync="dialogVisible"
   width="15%"
   :close-on-click-modal="false"
   :before-close="handleClose">
   <el-form
   :model="goodsStandardForm"
    ref="goodsStandardForm"
    :rules="rules"
    label-width="100px">
      <el-form-item label="规格名称:" prop="standardName">
        <el-input v-model="goodsStandardForm.standardName" placeholder="请输入规格名称"></el-input>
      </el-form-item>
      <el-form-item label="单位:">
        <el-select v-model="goodsStandardForm.unitId" placeholder="请选择" style="width: 100%;">
          <el-option
          v-for="(item, index) in this.goodsUnits"
          :key="Number(index)"
          :label="item.unitName"
          :value="Number(item.id)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="颜色:">
        <el-select v-model="goodsStandardForm.colorId" placeholder="请选择" style="width: 100%;">
          <el-option
          v-for="(item, index) in this.goodsColors"
          :key="Number(index)"
          :label="item.colorName"
          :value="Number(item.id)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="尺码:">
        <el-select v-model="goodsStandardForm.sizeId" placeholder="请选择" style="width: 100%;">
          <el-option
          v-for="(item, index) in this.goodsSizes"
          :key="Number(index)"
          :label="item.sizeName"
          :value="Number(item.id)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="原价:">
        <el-input-number v-model="goodsStandardForm.oriPrice" :precision="4" placeholder="请输入原价" style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="销售价:">
        <el-input-number v-model="goodsStandardForm.sealPrice" :precision="4" placeholder="请输入销售价" style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="库存数量:">
        <el-input-number v-model="goodsStandardForm.stockNumber" :precision="4" placeholder="请输入销售价" style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="图片" prop="standardImages">
        <UploadImageFile
        :limit="6"
        valueType="String"
        :uploadValue.sync="goodsStandardForm.goodsImages"/>
      </el-form-item>
      <el-form-item label="是否上架">
        <EnabledSwitch :value.sync="goodsStandardForm.isSeal"/>
      </el-form-item>
    </el-form>
    <div class="standard-footer-toolbar">
      <el-button type="default" @click="cancelAudit">取消</el-button>
      <el-button type="primary" @click="okSubmit">确定</el-button>
    </div>
   </el-drawer>
</template>
<script>
import UploadImageFile from '@/components/UploadImageFile/index.vue'
import EnabledSwitch from '@/components/EnabledSwitch/index.vue'

import { goodsColorList } from '@/api/goods/color'
import { goodsSizeList } from '@/api/goods/size'
import { goodsUnitList } from '@/api/goods/unit'
import { goodsStandardDetail, goodsStandardAdd, goodsStandardEdit } from '@/api/goods/standard'

export default {
  name: 'AddGoodsStandard',
  components: {
    UploadImageFile,
    EnabledSwitch
  },
  props: {
    showDialog: {
      type: Boolean,
      default: ()=> false
    },
    rowId: {
      type: Number,
      default: ()=> null
    },
    title: {
      type: String,
      default: ()=> null
    },
    formId: {
      type: Number,
      default: ()=> null
    },
    grid: {
      type: Object,
      default: ()=> null
    },
    refreshGrid: {
      type: Function,
      default: ()=> null
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.showDialog
      }
    },
    dialogTitle: {
      get() {
        return this.title
      }
    }
  },
  watch: {
    rowId: {
      handler(val) {
        if(!val) return
        this.loadGoodsStandardDetail(val)
      }
    }
  },
  created() {
    this.goodsStandardForm = { ...this.initForm }
    this.$nextTick(()=> {
      this.initSelectOptions()
    })
  },
  data() {
    return {
      goodsColors: [],
      goodsSizes: [],
      goodsUnits: [],
      goodsStandardForm: null,
      initForm: {
        id: null,
        goodsId: null,
        standardName: null,
        colorId: null,
        sizeId: null,
        unitId: null,
        oriPrice: 0.0000,
        sealPrice: 0.0000,
        standardImages: '',
        isSeal: 1,
        stockNumber: 0
      },
      rules: {
        standardName: [{ required: true, message: '请输入规格名称', trigger: 'blur, change' }],
        standardImages: [{ required: true, message: '请选择图片', trigger: 'blur, change' }]
      }
    }
  },
  methods: {
    // 初始化select 选择数据
    async initSelectOptions() {
      // 颜色
      const { data: colorData } = await goodsColorList()
      this.goodsColors = colorData

      // 尺码
      const { data: sizeData } = await goodsSizeList()
      this.goodsSizes = sizeData

      // 单位
      const { data: unitData } = await goodsUnitList()
      this.goodsUnits = unitData
    },

    // 详情
    async loadGoodsStandardDetail(rowId) {
      const { data } = await goodsStandardDetail(rowId)
      this.goodsStandardForm = { ...data }
    },
    // 提交
    async okSubmit() {
      this.$refs.goodsStandardForm.validate(async (valid) => {
       if(valid){
         try{
           this.loading = true
           if(!this.rowId){
             this.goodsStandardForm.goodsId = this.formId
             await goodsStandardAdd(this.goodsStandardForm)
             this.refreshGrid(this.grid)
             this.handleClose()
           }else {
             await goodsStandardEdit(this.goodsStandardForm)
             this.refreshGrid(this.grid)
             this.handleClose()
           }
           this.$emit('reloadData')
         }catch(e){
           this.loading = false
         }
       }else {
         console.log('error submit!!');
         this.loading = false
         return false;
       }
     });
    },

    // 取消
    cancelAudit() {
      this.handleClose()
    },

    // 关闭
    handleClose() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>
<style lang="scss" scoped>

.el-form {
  width: 90%;
}

.standard-footer-toolbar {
  width: 100%;
  margin-top: 25%;
  padding-left: 30px;

  .el-button {
    margin-right: 10px;
  }
}
</style>